<template>
  <div>
    <a-card title="字典详情">
      <div slot="extra" class="clearfix" >
        <a-button
          v-if="checkPermission(['admin','dict:add']) && dictPid"
          class="filter-item"
          size="small"
          style="float: right"
          type="primary"
          icon="plus"
          @click="crudCreate(dictPid)"
        >新增</a-button>
      </div>
      <div v-if="!dictPid">
        <div class="my-code">点击字典查看详情</div>
      </div>
      <div v-else>
        <!--工具栏-->
        <div class="head-container">
          <!-- <div v-if="crud.props.searchToggle">
            <a-input
              v-model="query.name"
              clearable
              placeholder="输入字典标签查询"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="toQuery"
            />
            <rrOperation />
          </div> -->
        </div>
        <!--表格渲染-->
        <a-table
          size="middle"
          row-key="id"
          :columns="columns"
          :data-source="tableData"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange"
        >
          <span slot="action" slot-scope="text, record" >
            <udOperation
              :data="record"
              :permission="permission"
              :disabled-dle="record.id === 1"
              @crudUpdate="crudUpdate"
              @crudDelete="crudDelete(record.id)"
            />
          </span>
        </a-table>
        <!--分页组件-->
      </div>
    </a-card>
    <dict-detail-update-modal ref="updateForm" @closeModal="closeModal" />
  </div>
</template>

<script>
import checkPermission from '@/utils/permission';
import ApiTree from '@/api/system/dictDetail';
import udOperation from '@crud/UD.operation';

import { Slime, crud } from '@/mixins/slime';
import DictDetailUpdateModal from './dictDetailUpdateModal';
export default {
  components: { udOperation, DictDetailUpdateModal },
  mixins: [Slime],
  data() {
    return {
      dictPid:null,
      dictId: null,
      tableData: [],
      columns: [
        {
          title: '字典标签',
          align: 'left',
          dataIndex: 'name',
        },
        {
          title: '排序',
          align: 'left',
          dataIndex: 'sort',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      permission: {
        add: ['admin', 'dict:add'],
        edit: ['admin', 'dict:edit'],
        del: ['admin', 'dict:del'],
      },
    };
  },
  created() {
    crud(ApiTree)
  },
  methods: {
    // 加载表格数据
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      ApiTree.getDictDetail(this.dictPid).then((res) => {
        let tableData = res.result;
        this.tableData = tableData;
      });
    },
    checkPermission,
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
